<template>
  <div class="myPage" v-infinite-scroll="load">
    <anserCard v-for="d in answerersSum" :key="'anserKey'+d" :cardData="AnswererDatas[d]" 
    :miaoshaCount="AnswererCount[AnswererDatas[d].id] ">
    <!-- AnswererCount[AnswererDatas[d].id] -->
      <!-- v-infinite-scroll="load" 放在最外面 -->
      <!-- overflow: auto 一定要加，不然滚轮不听使唤 -->
    </anserCard>
    <p v-if="loading">加载中...</p>
    <p>没有更多了</p>
  </div>
</template>
<script>

  import { dt } from "@/testData/testData.js"
  import anserCard from '@/components/tableDate/anserCard'
  export default {
    name: "miaosha",
    components: { anserCard },
    data() {
      return {
        AnswererDatas:{"msg":"isnotcome"},
        AnswererCount: [],
        count: 0,
        answerersSum:0,
        loading: false
      }
    },
    methods: {
      // 滚动信息
      load() {

        console.log(this.count)
        if (this.count >= this.ObjSum) {
          return
        }
        this.loading = true
        setTimeout(() => {
          this.count += 1
          this.loading = false
        }, 1500)

      },

      getMiaoshaDate() {

        this.$axios.get(this.MYURL + "/miaosha/getMiaoshatables")
          // http://localhost:8001/miaosha/selectAll 
          .then(res => {
            // this.tableData=res
            // console.log("提交表：", res)
            
            this.AnswererDatas = res["data"]["answerers"]
            this.AnswererCount = res["data"]["miaoshaCount"]
            this.answerersSum=Object.keys(this.AnswererDatas)
            // console.log("AnswererCount", this.AnswererCount[this.AnswererDatas[0]["id"]])
            // console.log("AnswererDatas.id:",this.AnswererDatas[0])
          }
          )
          .catch(function (error) { alert("请求失败" + error) })
      },

    },
    computed: {
      ObjSum() {
        return Object.getOwnPropertyNames(dt).length
      },
      noMore() {
        return this.count >= this.ObjSum
      },
      disabled() {
        return this.loading || this.noMore
      }
    }
    ,mounted() {
      this.getMiaoshaDate()
      this.count=9;
      // console.log(this.AnswererDatas)
    },

  }


</script>
<style scoped>
  .myPage {
    height: calc(90vh);
    overflow: auto
      /* background-color: rgba(174, 47, 47, 0.5); */
  }
</style>